<template>
  <div class="gutter-wrapper">
    <s-row gutter="30">
      <s-col class="item" span="8"> <span> col-8; gutter-30;</span> </s-col>
      <s-col class="item" span="8"> <span> col-8; gutter-30;</span> </s-col>
      <s-col class="item" span="8"> <span> col-8; gutter-30;</span> </s-col>
    </s-row>
    <s-row gutter="20">
      <s-col class="item" span="8"> <span> col-8; gutter-20;</span> </s-col>
      <s-col class="item" span="8"> <span> col-8; gutter-20;</span> </s-col>
      <s-col class="item" span="8"> <span> col-8; gutter-20;</span> </s-col>
    </s-row>
    <s-row gutter="10">
      <s-col class="item" span="8"> <span> col-8; gutter-10;</span> </s-col>
      <s-col class="item" span="8"> <span> col-8; gutter-10;</span> </s-col>
      <s-col class="item" span="8"> <span> col-8; gutter-10;</span> </s-col>
    </s-row>
  </div>
</template>
<script>
import Row from "../../../src/components/Row.vue";
import Col from "../../../src/components/Col.vue";
export default {
  components: {
    "s-row": Row,
    "s-col":Col
  },

};
</script>
<style lang="scss" scoped>
  * { box-sizing: border-box; }
  .gutter-wrapper { padding-top: 10px;
    .item { text-align: center; color: white;
      > span { display: block; background: #3eaf7c; }
    }
  }
</style>